<template>
	<div class="table-demo-container layout-padding">
		<div class="table-demo-padding layout-padding-view layout-padding-auto">
			<TableSearch :search="state.tableData.search" @search="onSearch" />

			<Table ref="tableRef" v-bind="state.tableData" class="table-demo" @selectionTable="handleSelectionTable"
				@pageChange="onTablePageChange" @sortHeader="onSortHeader">
				<template #header>
					<el-button type="primary">新增</el-button>
					<el-button type="primary" @click="batchDelete">批量删除</el-button>
				</template>

				<template #actionCol="{ row }">
					<el-button text size="small" type="primary" @click="handleDetail(row)">查询</el-button>
					<el-button text size="small" type="primary" @click="handleEdit(row)">编辑</el-button>
					<el-popconfirm title="确定删除吗？" @confirm="onTableDelRow(row)">
						<template #reference>
							<el-button text size="small" type="primary">删除</el-button>
						</template>
					</el-popconfirm>
				</template>
			</Table>
		</div>
	</div>
</template>

<script setup name="questionBank">
import { defineAsyncComponent, reactive, ref, onMounted,nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';

import { QuestionBank } from '/@/api';

// 引入组件
const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
const TableSearch = defineAsyncComponent(() => import('/@/components/table/search.vue'));

// 定义变量内容
const tableRef = ref();
const state = reactive({
	tableData: {
		// 列表数据（必传）
		data: [],
		// 表头内容（必传，注意格式）
		header: [
			{ key: 'name', colWidth: '', title: '应检尽检核酸采样点名称', type: 'text', isCheck: true },
			{ key: 'address', colWidth: '', title: '详细地址', type: 'text', isCheck: true },
			{ key: 'phone', colWidth: '', title: '采样点联系电话', type: 'text', isCheck: true },
			{ key: 'time', colWidth: '', title: '开放时间', type: 'text', isCheck: true },
			{ key: 'isSupport', colWidth: '', title: '是否支持24小时核酸检测', type: 'text', isCheck: true },
			{ key: 'image', colWidth: '', width: '70', height: '40', title: '图片描述', type: 'image', isCheck: true },
		],
		// 配置项（必传）
		config: {
			total: 0, // 列表总数
			loading: true, // loading 加载
			isBorder: true, // 是否显示表格边框
			isSerialNo: true, // 是否显示表格序号
			isSelection: true, // 是否显示表格多选
			isOperate: true, // 是否显示表格操作栏
			isShowTool: true,//是否显示表头工具栏
		},
		// 搜索表单，动态生成（传空数组时，将不显示搜索，注意格式）
		search: [
			{ label: '采样点名称', prop: 'name', placeholder: '请输入应检尽检核酸采样点名称', required: true, type: 'input' },
			{ label: '详细地址', prop: 'address', placeholder: '请输入详细地址', required: false, type: 'input' },
			{ label: '联系电话', prop: 'phone', placeholder: '请输入采样点联系电话', required: false, type: 'input' },
			{ label: '开放时间', prop: 'time', placeholder: '请选择', required: false, type: 'date' },
			{
				label: '支持24小时',
				prop: 'isSupport',
				placeholder: '请选择',
				required: false,
				type: 'select',
				options: [
					{ label: '是', value: 1 },
					{ label: '否', value: 0 },
				],
			},
			{ label: '图片描述', prop: 'image', placeholder: '请输入图片描述', required: false, type: 'input' },
			{ label: '核酸机构', prop: 'mechanism', placeholder: '请输入核酸机构', required: false, type: 'input' },
		],
		// 搜索参数（不用传，用于分页、搜索时传给后台的值，`getTableData` 中使用）
		param: {
			pageNum: 1,
			pageSize: 10,
			conditions:[]
			
		},
		//设置页面进入初始化一直使用的参数条件
		initConditions:[],
		
		// 打印标题
		printName: 'vueNextAdmin 表格打印演示',
	},
});

// 初始化列表数据
const getTableData = async () => {
	state.tableData.config.loading = true;

	await QuestionBank.postQuestionBanks(state.tableData.param).then(res => {
		if (res.data) {
			state.tableData.data = res.data.list
			state.tableData.config.total = res.data.total
		}
	})
	// 数据总数（模拟，真实从接口取）
	setTimeout(() => {
		state.tableData.config.loading = false;
	}, 500);
};
// 搜索点击时表单回调
const onSearch = (condit) => {
	state.tableData.param.conditions = [];
	state.tableData.param.conditions = [...state.tableData.initConditions,...condit]
	getTableData()
};

const checkList = ref([]);
const handleSelectionTable = (selectlist) => {
	checkList.value = selectlist
}

// 查询当前行详细信息
const handleDetail = (row) => {
	ElMessage.info(row.id);
};

// 编辑当前行详细信息
const handleEdit = (row) => {
	ElMessage.success(row.id);
};

const batchDelete = () => {
	if (checkList.value.length == 0) {
		ElMessage.error("至少选中一条数据")
	} else {
		ElMessageBox.confirm(
			'是否确认要删除数据?',
			'Warning',
			{
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				let idArr = []
				checkList.value.forEach(e => {
					idArr.push(e.id)
				});
				let ids = idArr.join(',')
				console.log(ids);
				//删除接口
				ElMessage({
					type: 'success',
					message: ids,
				})
			})


	}
}

// 删除当前项回调
const onTableDelRow = (row) => {
	ElMessage.success(`删除${row.name}成功！`);
	getTableData();
};
// 分页改变时回调
const onTablePageChange = (page) => {

	state.tableData.param.pageNum = page.pageNum;
	state.tableData.param.pageSize = page.pageSize;
	getTableData();
};
// 拖动显示列排序回调
const onSortHeader = (data) => {
	state.tableData.header = data;
};
// 页面加载时
onMounted(() => {
	getTableData();
});
</script>

<style scoped lang="scss">
.table-demo-container {
	.table-demo-padding {
		padding: 15px;

		.table-demo {
			flex: 1;
			overflow: hidden;
		}
	}
}
</style>
